<template>
  <div>
    <!-- 开屏提示 -->
    <div class="PromptBox" v-if="showAlert">
      <div class="alert-danger1" role="alert">欢迎1</div>
      <div class="alert-danger2" role="alert">
        当前还未有未签和迟到记录！请继续保持哦！
      </div>
    </div>

    <!-- logo -->
    <div class="logo">
        <span>
            <p class="qd">起点</p>
            <p>studio</p>
        </span>
        <span></span>
        <span></span>
    </div>

    <!-- 时钟 -->
    <!-- <div class="fysz">
      <div class="clock">
        <div class="flip" v-for="(digit, index) in digits" :key="index">
          <div class="digital front" :data-number="digit.front"></div>
          <div class="digital back" :data-number="digit.back"></div>
        </div>
        <em class="divider">:</em>
        <em class="divider">:</em>
      </div>
    </div> -->
    <div class="fysz">
      <!-- <div class="clock">
        <div class="flip" >
          <div class="digital front" :data-number="this.digits[0].front"></div>
          <div class="digital back" :data-number="this.digits[0].back"></div>
        </div>
        <div class="flip" >
          <div class="digital front" :data-number="this.digits[1].front"></div>
          <div class="digital back" :data-number="this.digits[1].back"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip" >
          <div class="digital front" :data-number="this.digits[2].front"></div>
          <div class="digital back" :data-number="this.digits[2].back"></div>
        </div>
        <div class="flip" >
          <div class="digital front" :data-number="this.digits[3].front"></div>
          <div class="digital back" :data-number="this.digits[3].back"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip" >
          <div class="digital front" :data-number="this.digits[4].front"></div>
          <div class="digital back" :data-number="this.digits[4].back"></div>
        </div>
        <div class="flip" >
          <div class="digital front" :data-number="this.digits[5].front"></div>
          <div class="digital back" :data-number="this.digits[5].back"></div>
        </div>
      </div> -->
      <div class="clock">
        <div class="flip" v-for="(digit, index) in digits.slice(0, 2)" :key="index" :class="{ running: digit.flipping }">
          <div class="digital front" :data-number="digit.front"></div>
          <div class="digital back" :data-number="digit.back"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip" v-for="(digit, index) in digits.slice(2,4)" :key="index + 'second'" :class="{ running: digit.flipping }">
          <div class="digital front" :data-number="digit.front"></div>
          <div class="digital back" :data-number="digit.back"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip" v-for="(digit, index) in digits.slice(4,6)" :key="index + 'second'" :class="{ running: digit.flipping }">
          <div class="digital front" :data-number="digit.front"></div>
          <div class="digital back" :data-number="digit.back"></div>
        </div>
      </div>
    </div>

    <!-- 签到表格 -->
    <div class="qdk">
      <div class="qdkleft">
        <table cellspacing="0" cellpadding="0" border="0">
          <tr>
            <th>签到时间/星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
          </tr>
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <th>{{ tableTime[rowIndex].start_time + ' ~ ' + tableTime[rowIndex].end_time }}</th>
            <td v-for="(cell, colIndex) in row" :key="colIndex">
              <div :class="buttonClass1(cell)"
              v-if="cell!==-1">
              <div :class="buttonClass2(cell)">
                <button
                    @click="qiandao(rowIndex, colIndex)"
                    class="custom-button"
                  >
                    {{ buttonContent(cell) }} <!-- 根据cell的值动态设置内容 -->
                  </button>
              </div>

              </div>
              <div v-else>
                --
              </div>
            </td>
          </tr>
        </table>
      </div>

      <div class="qdkright">
        <div class="multi-button">
          <ul class="zd">
            <li @mouseover="toggleContent('zd')">
              <strong class="zd1">制度</strong>
            </li>
            <li @mouseover="toggleContent('cd')">
              <strong class="zd2">本周迟到记录</strong>
            </li>
          </ul>
        </div>

        <!-- 制度内容 -->
        <div class="zdinner" v-if="currentContent === 'zd'">
          <p><span>✪</span>学习时间内，工作室内任何人不得从事娱乐活动。</p>
          <p><span>✪</span>工作时间保持安静，讨论问题尽量不要影响他人。</p>
          <p><span>✪</span>严禁在室内大声喧哗或粗俗用语。</p>
          <p><span>✪</span>例会时间为每周五晚上19:00，务必准时到达。</p>
          <p><span>✪</span>工作室资产归全体成员所有，不得私自处理。</p>
        </div>

        <!-- 迟到记录 -->
        <!-- <div class="cd" v-if="currentContent === 'cd'">
          <ul>
            <li v-for="record in overTime" :key="record.name">
              {{ record.name }} {{ record.week }}周 {{ record.dayOfWeek }}日 {{ record.period }}节次 迟到原因: {{ record.violation_content }}
            </li>
          </ul>
        </div> -->
        <table class="table2" style="width: 200px;">
  <tr>
    <!-- <th>姓名</th> -->
    <!-- <th>周数</th> -->
    <th>日</th>
    <th>节次</th>
    <!-- <th>迟到原因</th> -->
  </tr>
  <tr v-for="(row, index) in overTime" :key="index">
    <!-- <td>{{ row.name }}</td>
    <td>{{ row.week }}</td> -->
    <td>{{ row.dayOfWeek }}</td>
    <td>{{ row.period }}</td>
    <!-- <td>{{ row.violation_content }}</td> -->
  </tr>
</table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      showAlert: true,
      currentContent: 'zd',
      digits: [
        { front: '0', back: '1', flipping: false },
        { front: '0', back: '1', flipping: false },
        { front: '0', back: '1', flipping: false },
        { front: '0', back: '1', flipping: false },
        { front: '0', back: '1', flipping: false },
        { front: '0', back: '1', flipping: false }
      ],
      tableData: [],
      studentId: localStorage.getItem('userid'),
      tableTime: [],
      overTime: []
    };
  },
  mounted() {
    // 关闭提示框
    setTimeout(() => {
      this.showAlert = false;
    }, 3500);

    this.startClock();
    this.gettime();
    this.getovertime();
    this.generateTableData();
  },
  methods: {
    buttonClass1(cell) {
      if (cell === 0) {
        return 'ppbox'; // 签到时，按钮样式为 bubble
      } 
      return 'default'; // 默认样式
    },
    buttonClass2(cell){
      if(cell===0){
        return 'bubble'; // 签到时，按钮样式为 bubble
      }
      return 'default'; // 默认样式
    },
    // 根据签到状态返回不同的按钮内容
    buttonContent(cell) {
      if (cell === 1) {
        return '✔'; // 未签到时，按钮内容为 "✔"
      } else if (cell === 3) {
        return '✘'; // 其他状态时，按钮内容为 "✘"
      }else if(cell===0){
        return '签到'; // 签到时，按钮内容为 "签到"
      }
      return ''; // 签到时不显示内容
    },
    // 时钟功能
    getTimeFromDate(date) {
      return date
        .toTimeString()
        .slice(0, 8)
        .split(':')
        .join('');
    },
    updateDigits(digits) {
      const currentTime = this.getTimeFromDate(new Date());
      const nextTime = this.getTimeFromDate(new Date(Date.now() + 1000));
      for (let i = 0; i < digits.length; i++) {
        if (currentTime[i] !== nextTime[i]) {
          this.digits[i].flipping = true;
          this.digits[i].front = currentTime[i];
          this.digits[i].back = nextTime[i];
          setTimeout(() => {
            this.digits[i].flipping = false;
            this.digits[i].front = nextTime[i];
          }, 600);
        }
      }
    },
    startClock() {
      setInterval(() => {
        const now = new Date();
        const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
        const digits = timeStr.split(':').flatMap(part => [...part]);
        this.updateDigits(digits);
      }, 1000);
    },
    updateDigits(digits) {
      this.digits.forEach((digit, index) => {
        const currentDigit = digits[index];
        if (currentDigit !== digit.front) {
          this.flipDigit(index, currentDigit);
        }
      });
    },
    flipDigit(index, newDigit) {
      const digit = this.digits[index];
      digit.flipping = true;
      digit.back = newDigit;
      setTimeout(() => {
        digit.front = newDigit;
        digit.flipping = false;
      }, 600);
    },
    // 切换制度和迟到内容
    toggleContent(content) {
      this.currentContent = content;
    },
    // 签到
    qiandao(row, column) {
      if (this.tableData[row][column] === 1) {
        alert('请勿重复签到');
        return;
      }
      this.$axios.post('api/user/qiandao', {
        period: row + 1,
        weekday: column + 1,
        studentId: this.studentId
      }).then(response => {
        if (response.data.data) {
          alert('签到成功');
        } else {
          alert('请在规定时间内操作');
        }
        this.generateTableData();
      }).catch(error => {
        console.error(error);
      });
    },
    // 获取签到时间
    gettime() {
      this.$axios.get('api/admin/gettime').then(response => {
        this.tableTime = response.data.data.time;
      }).catch(error => {
        console.error(error);
      });
    },
    // 获取迟到记录
    getovertime() {
      this.$axios.get('api/user/overtime', {
        params: { studentId: this.studentId }
      }).then(response => {
        this.overTime = response.data.data;
      }).catch(error => {
        console.error(error);
      });
    },
    // 生成签到表格
    generateTableData() {
      this.$axios.get('api/user/cource', {
        params: { studentId: this.studentId }
      }).then(response => {
        const cou = response.data.data;
        this.tableData = Array.from({ length: 5 }, () => Array(5).fill(-1));
        for (let i = 0; i < 5; i++) {
          const periodCourses = cou.filter(item => item.period === i + 1);
          for (let j = 0; j < 5; j++) {
            const course = periodCourses.find(item => item.dayOfWeek === j + 1);
            if (course) {
              this.tableData[i][j] = course.isOver;
            }
          }
        }
      }).catch(error => {
        alert('账号错误请联系管理员');
        this.$router.push({ path: '/login' });
      });
    }
  }
};
</script>


<style scoped>
.custom-button {
  /* 清除默认样式 */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;

  /* 自定义样式 */
  color: #fff;
  text-align: center;
}
/* ====================翻页时钟===================== */
.clock {
  position: relative;
  width: 36vmin;
  top: 11vmin;
  left: 50vw;
  transform: translateX(-50%);
  display: flex;
  z-index: 9990;
}

/* 时钟的分隔 */
.clock .divider {
  font-size: 6vmin;
  line-height: 8vmin;
  font-style: normal;
  color: rgb(255, 255, 255);
}

/* 时钟的卡片 */
.clock .flip {
  position: relative;
  width: 5vmin;
  height: 8vmin;
  margin: 0.2vmin;
  font-size: 6vmin;
  font-weight: 700;
  line-height: 8vmin;
  text-align: center;
  background: rgb(252, 252, 252);
  border-radius: 1.1vmin;
  box-shadow: 0 0 1vmin rgba(54, 54, 54, 0.3);
}

/* 时钟上的数字 */
.clock .flip .digital::before,
.clock .flip .digital::after {
  position: absolute;
  content: attr(data-number);
  left: 0;
  right: 0;
  color: #dbc4c4;
  color: #eefaff;
  background: #556fb7;
  overflow: hidden;
  -webkit-perspective: 160px;
  perspective: 160px;
}

/* 翻页前的数字 */
.clock .flip .digital::before {
  top: 0;
  bottom: 50%;
  border-bottom: 0.1vmin solid #666;
  border-radius: 1.1vmin 1.1vmin 0 0;
}

/* 翻页后的数字 */
.clock .flip .digital::after {
  top: 50%;
  bottom: 0;
  line-height: 0;
  border-radius: 0 0 1.1vmin 1.1vmin;
}

.clock .flip .back::before,
.clock .flip .front::after {
  z-index: 1;
}

.clock .flip .back::after {
  z-index: 2;
}

.clock .flip .front::before {
  z-index: 3;
}

.clock .flip .back::after {
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotateX(0.5turn);
  transform: rotateX(0.5turn);
}

.clock .flip.running .front::before {
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation: frontFlipDown 0.6s ease-in-out;
  animation: frontFlipDown 0.6s ease-in-out;
  box-shadow: 0 -0.2vmin 0.6vmin rgba(255, 255, 255, 0.3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.clock .flip.running .back::after {
  -webkit-animation: backFlipDown 0.6s ease-in-out;
  animation: backFlipDown 0.6s ease-in-out;
}

@-webkit-keyframes frontFlipDown {
  to {
    -webkit-transform: rotateX(0.5turn);
    transform: rotateX(0.5turn);
  }
}

@keyframes frontFlipDown {
  to {
    -webkit-transform: rotateX(0.5turn);
    transform: rotateX(0.5turn);
  }
}

@-webkit-keyframes backFlipDown {
  to {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}

@keyframes backFlipDown {
  to {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}

:root {
    --clr: #556fb7;
    --cla: #556fb75b;

}


body {
    height: 100vmin;
    /* display: flex; */
    /* justify-content: flex-start; */
    /* align-items: center; */
    background: linear-gradient(to top, var(--clr), #F1F2B5);
    /* background: linear-gradient(to bottom, hsl(317, 94%, 72%), #6352ff); */
    overflow: hidden;
}

/* ====================拖动效果====================== */
.star {
    /* 关闭宽高，有神奇效果 */
    width: 1px;
    height: 1px;
    position: absolute;
}

.star:before {

    position: absolute;
    content: "\2726";
    inset: 0;
    box-shadow: 0 0 1em 0.1em #40324c;
}

/* ========================背景============================= */
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

body {
    /* font-family: 'Quicksand', sans-serif; */
    /* margin: 0; */
    min-height: 100vmin;
    background-color: #e9b4dc;
    background-image:
        radial-gradient(closest-side, rgb(234, 228, 112), rgba(235, 105, 78, 0)),
        radial-gradient(closest-side, rgb(11, 92, 243), rgba(243, 11, 164, 0)),
        radial-gradient(closest-side, rgb(131, 254, 233), rgba(254, 234, 131, 0)),
        radial-gradient(closest-side, rgb(152, 116, 251), rgba(170, 142, 245, 0)),
        radial-gradient(closest-side, rgb(185, 241, 145), rgba(248, 192, 147, 0));
    /* radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
        radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
        radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
        radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
        radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); */
    background-size:
        130vmax 130vmax,
        80vmax 80vmax,
        90vmax 90vmax,
        110vmax 110vmax,
        90vmax 90vmax;
    background-position:
        -80vmax -80vmax,
        60vmax -30vmax,
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;
    background-repeat: no-repeat;
    animation: 6s movement linear infinite;
}

body::after {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
    /* -webkit-backdrop-filter: blur(10px); */
    z-index: -10;
}

@keyframes movement {

    0%,
    100% {
        background-size:
            130vmax 130vmax,
            80vmax 80vmax,
            90vmax 90vmax,
            110vmax 110vmax,
            90vmax 90vmax;
        background-position:
            -80vmax -80vmax,
            60vmax -30vmax,
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
    }

    25% {
        background-size:
            100vmax 100vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            60vmax 60vmax;
        background-position:
            -60vmax -90vmax,
            50vmax -40vmax,
            0vmax -20vmax,
            -40vmax -20vmax,
            40vmax 60vmax;
    }

    50% {
        background-size:
            80vmax 80vmax,
            110vmax 110vmax,
            80vmax 80vmax,
            60vmax 60vmax,
            80vmax 80vmax;
        background-position:
            -50vmax -70vmax,
            40vmax -30vmax,
            10vmax 0vmax,
            20vmax 10vmax,
            30vmax 70vmax;
    }

    75% {
        background-size:
            90vmax 90vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            70vmax 70vmax;
        background-position:
            -50vmax -40vmax,
            50vmax -30vmax,
            20vmax 0vmax,
            -10vmax 10vmax,
            40vmax 60vmax;
    }
}

/* ====================logo===================== */
.logo {
    position: relative;
    width: 15vmin;
    height: 15vmin;
    float: right;
    margin-top: 4.5vmin;
    margin-right: 13vmin;
    animation: zz 4.5s ease-in-out infinite;
    z-index: 10;
}

.logo span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;

}

.logo span:nth-child(1) {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(1vmin);
    border-top: 0.25px solid rgba(255, 255, 255, 0.5);
    border-left: 0.25px solid rgba(255, 255, 255, 0.5);
    z-index: 2;
}

.logo span:nth-child(2) {
    background: rgb(254, 249, 195);
    /* background: #f6e391; */
    animation: wx 4s ease-in-out infinite;

}

.logo span:nth-child(3) {
    background: #ffffff;
    background: rgb(186, 200, 255);
    animation: wx 4s ease-in-out infinite;
    animation-delay: -2s;
    border-radius: 0;
}

@keyframes wx {
    0% {
        transform: translate(-13vmin, 4vmin) scale(0.4) rotate(0deg);
        z-index: 1;
    }

    50% {
        transform: translate(13vmin, -4vmin) scale(0.4) rotate(180deg);
        z-index: 1;
    }

    50.00001% {
        transform: translate(13vmin, -4vmin) scale(0.4) rotate(180deg);
        z-index: 3;
    }

    100% {
        transform: translate(-13vmin, 4vmin) scale(0.4) rotate(360deg);
        z-index: 3;
    }
}

@keyframes zz {
    50% {
        transform: translateY(1vmin)
    }
}

.logo span p {
    color: #679b36df;
    color: #47761adf;
    color: #aad9ff;
    /* color: transparent; */
    /* -webkit-text-stroke-color: 2px #0e6870; */
    font-size: 3vmin;
    text-align: center;
    font-weight: 900;
    font-family: 'Dubai Light';
    /* 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffff50;
    text-shadow: 2px 2px #4b7a7c; */

}

.logo .qd {
    color: #679b36df;
    color: #47761adf;
    color: #f6eeb7;
    color: hsl(244, 90%, 56%);
    color: hsl(81, 60%, 30%);
    font-size: 5vmin;
    margin-top: 2vmin;
    font-family: '幼圆';
    color: transparent;
    -webkit-text-stroke-color: 2px #0e6870;
    text-align: center;
    font-weight: 900;
    -webkit-text-stroke-width: 0.12vmin;
    -webkit-text-stroke-color: #f4fcac;
}

/* .logo span p:nth-child(1) {
    font-size: 35px;
    margin-top: 20px;
    font-weight: 600;
    /* font-family: '黑体'; */
/* } */

/* .logo span p:nth-child(2) {
    font-size: 15px;
    margin-top: 3px;
    font-family: '黑体';
} */


/* ====================提示弹窗===================== */
.alert-danger1,
.alert-danger2 {
    /* float: left; */
    display: none;
    width: 40vmin;
    margin-left: 50vw;
    transition: 0.5s;
    background: #F0F9EB;
    color: #67C23A;
    /* margin: 10px auto; */
    margin-top: 1.1vmin;
    padding: 1vmin 1vmin;
    border-radius: 0.7vmin;
    /* 不可复制 */
    user-select: none;
    /* 当发生 改变 时过度 */
    transition: .5s;
    transform: translate(-50%);
    position: relative;
    top: -100px;
    opacity: 0;
    text-align: center;
    font-size: 1.5vmin;
    font-family: '黑体';
    z-index: 9999;
}

.PromptBox {
    /* background: red; */
    position: absolute;
    top: 0;
    width: 100%;
    /* left: 50%; */
}

.shown {
    top: 0;
    opacity: 1;
}


/* ====================签到框=====================  */
.qdk {
    width: 155vmin;
    height: 70vmin;
    /* background: #ffffffcf; */
    border-radius: 3vmin;
    position: relative;
    top: 15vmin;
    left: 50vw;
    transform: translateX(-50%);
    z-index: 10;
}

.qdkleft {
    width: 100vmin;
    height: 70vmin;
    /* background: #ffeae3a8; */
    border-radius: 3vmin 0.6vmin 0.6vmin 3vmin;
    position: absolute;
    top: 0vmin;
    left: 0;
    z-index: 10;
    overflow: hidden;
}

/* ====================签到框=====================  */
table {
    width: 100vmin;
    border: none;
    font-family: '黑体';
    font-size: 2.6vmin;

}

/* 行 */
tr {
    height: 11.7vmin;
    /* background: #ffffff; */
}

/* 题头 */
th {
    color: #ffffff;
    background: #666666b5;
}

/* 单元格 */
td {
    width: 16vmin;
    text-align: center;
    empty-cells: 0;
    color: #433e42;
    background: #8f8f8f35;
    background: #bbbbbb99;
    border: 0.1vmin solid #ffffff7a;
}

/* ====================签到按钮=====================  */
.ppbox {
    width: 8.5vmin;
    height: 8.5vmin;
    /* 相对定位 */
    position: relative;
    display: inline-block;
    /* background-color: #0e6870; */
    color: #fff;
    font-size: 6vmin;
    line-height: 7vmin;
    margin-top: 1.5vmin;

}

/* 泡泡 */
.bubble {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 75% 30%, #fff 0.5vmin, #ff21c0 8%, #5b5b5b 60%, #ff21c0 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 2vmin #fff,
        inset 1vmin 0 4.6vmin #eaf5fc,
        inset 8vmin 0 6vmin #efcde6,
        inset -2vmin -6vmin 10vmin #f9f6de,
        inset 0 5vmin 14vmin #f9f6de,
        0 0 9vmin #fff;
    box-shadow: inset 0 0 2vmin #ffffff67,
        inset 1vmin 0 4.6vmin #eaf5fcb0,
        inset 8vmin 0 6vmin #efcde697,
        inset -2vmin -6vmin 10vmin #f9f6dec0,
        inset 0 5vmin 14vmin #f9f6de7e,
        0 0 9vmin #ffffffef;
    animation: bubble 4s ease-in-out infinite;
    line-height: 8.6vmin;
    font-size: 3vmin;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    font-family: '幼圆';
    transform: 0.5s;
    margin-top: -0.5vmin;
}

.bubbledisappear {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 75% 30%, #fff 0.5vmin, #ff21c0 8%, #5b5b5b 60%, #ff21c0 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 2vmin #fff,
        inset 1vmin 0 4.6vmin #eaf5fc,
        inset 8vmin 0 6vmin #efcde6,
        inset -2vmin -6vmin 10vmin #f9f6de,
        inset 0 5vmin 14vmin #f9f6de,
        0 0 9vmin #fff;
    box-shadow: inset 0 0 2vmin #ffffff67,
        inset 1vmin 0 4.6vmin #eaf5fcb0,
        inset 8vmin 0 6vmin #efcde697,
        inset -2vmin -6vmin 10vmin #f9f6dec0,
        inset 0 5vmin 14vmin #f9f6de7e,
        0 0 9vmin #ffffffef;
    line-height: 8.6vmin;
    font-size: 3vmin;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    font-family: '幼圆';
    transform: 0.5s;
    margin-top: -0.5vmin;
    animation: disappear 0.5s;
}

@keyframes bubble {

    0%,
    100% {
        transform: translateY(0.3vmin);
    }

    50% {
        transform: translateY(-0.3vmin);
    }
}

@keyframes disappear {

    0% {}

    100% {
        display: none;
    }
}

/* ====================制度=====================  */
.qdkright {
    width: 50vmin;
    height: 70vmin;
    background: linear-gradient(to bottom, #ffffffe3, #ffffff57, #fdfdfd5d);
    border-radius: 3vmin;
    position: absolute;
    top: 0vmin;
    left: 130vmin;
    /* clip-path: circle(50%); */
    transform: translateX(-50%);
    z-index: 10;
}

.zd {
    width: 46vmin;
    height: 7vmin;
    /* background: red; */
    border-radius: 3vmin 3vmin 0 0;
    /* background: linear-gradient(to bottom, #fff, hsla(0, 0%, 100%, 0.204)); */
    /* background: #fff; */
    /* border: .05vmin solid hsla(228, 16%, 63%, 0.4); */
    /* box-shadow: 0 0 1vmin hsla(228, 16%, 63%, 0.2), .4vmin .4vmin 1vmin hsla(228, 16%, 63%, 0.2); */
    cursor: default;
    position: relative;
}

.zd strong {
    display: inline-block;
    text-align: center;
    width: 19vmin;
    background: linear-gradient(to right, rgb(246, 145, 216), rgb(36, 229, 255), rgb(255, 248, 38))no-repeat right bottom;
    background-size: 0px 0.3vmin;
    /* border-radius: 5vmin; */
    transition: background-size 0.5s;
    font-size: 2.5vmin;
    line-height: 6vmin;
    margin-top: 0.6vmin;
    font-family: '幼圆';
}

.zd1 {
    position: absolute;
    left: 4vmin;
}

.zd2 {
    position: absolute;
    left: 26vmin;
}

.zd strong:hover {
    background-position: left bottom;
    background-size: 100% 0.3vmin;
}

.zdinner {
    display: block;
    font-size: 2vmin;
    /* background: red; */
    width: 45vmin;
    margin-left: 2.4vmin;
    margin-top: 1.7vmin;
    line-height: 2.7vmin;
    font-family: '幼圆';
    font-weight: 800;
    color: #393939d5;
    color: #00376ea7;
}

.zdinner p {
    transition: all 0.4s;
}

.zdinner p:hover {
    color: rgb(250, 95, 188)
}

.zdinner p {
    margin-top: 1.5vmin;
}

.zdinner p span {
    color: rgb(54, 93, 165);
    color: rgb(84, 142, 249);
    width: 2.5vmin;
    height: 2.5vmin;
    margin: -0.6vmin 1vmin -0.6vmin 1.6vmin;
    perspective: 1000px;
    animation: star 2s linear infinite;
}

@keyframes star {
    0% {}

    50% {
        /* transform: translateZ(20px) translateX(2px) rotateY(45deg); */
        /* filter: blur(0.05vmin); */
        color: rgb(84, 142, 249);
        color: rgb(45, 86, 161);

    }

    100% {}
}

.cd {
    display: none;
    font-size: 2vmin;
    /* background: red; */
    width: 40vmin;
    margin-left: 3vmin;
    margin-top: 1.7vmin;
    line-height: 2.7vmin;
    font-family: '幼圆';
    font-weight: 800;
    color: #393939d5;
}

/* ====================室训===================== */
.sx {
    position: relative;
    width: 100vw;
    height: 7vmin;
    bottom: -27vmin;
    /* border: 1px solid red; */
}

.sx span {
    position: absolute;
    width: 3vmin;
    height: 6vmin;
    line-height: 6vmin;
    margin: 0 1vmin;
    color: #fff;
    text-align: center;
    font-size: 3vmin;
    transform: rotate(180deg);
    opacity: 0;
    animation: wzxz 4s linear infinite;
}

.sx span:nth-child(2) {
    animation-delay: 0.15s;
}

.sx span:nth-child(3) {
    animation-delay: 0.3s;
}

.sx span:nth-child(4) {
    animation-delay: 0.45s;
}

.sx span:nth-child(5) {
    animation-delay: 0.6s;
}

.sx span:nth-child(6) {
    animation-delay: 0.75s;
}

.sx span:nth-child(7) {
    animation-delay: 0.9s;
}

.sx span:nth-child(8) {
    animation-delay: 1.05s;
}

.sx span:nth-child(9) {
    animation-delay: 1.3s;
}

.sx span:nth-child(10) {
    animation-delay: 1.45s;
}

.sx span:nth-child(11) {
    animation-delay: 1.6s;
}

.sx span:nth-child(12) {
    animation-delay: 1.75s;
}

.sx span:nth-child(13) {
    animation-delay: 1.9s;
}



@keyframes wzxz {
    0% {
        right: 0;
        opacity: 0;
    }

    35% {
        right: 41%;
        transform: rotate(0deg);
        opacity: 1;
    }

    65% {
        right: 59%;
        transform: rotate(0deg);
        opacity: 1;
    }

    100% {
        right: 100%;
        transform: rotateZ(-180deg);
        opacity: 0;
    }
}
</style>